<template>
  <q-input
    @click="show"
    outlined
    :model-value="shelf.typeName"
    label="选择货架"
  >
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section
          class="row items-center q-gutter-x-sm no-wrap overflow-auto"
          style="min-width: 20rem"
        >
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">
              选择货架
            </div>
            <q-space />
          </template>
          <q-select
            v-model="shelfType"
            :options="shelfTypes"
            label="选择规格"
            behavior="menu"
            outlined
            dense
            style="min-width: 8rem"
            option-label="name"
          />
        </q-card-section>
        <q-separator />
        <q-slide-transition>
          <div v-if="shelfList.length !== 0">
            <q-card-section
              style="
                max-height: calc(100vh - 10rem);
                min-height: 10rem;
                min-width: 15rem;
                overflow: auto;
              "
              class="row items-center justify-center"
            >
              <q-card
                v-for="mapPose in shelfList"
                v-bind:key="mapPose.id"
                class="q-ma-sm"
                @click="select(mapPose)"
                style="min-width: 15rem"
              >
                <q-card-section class="row items-center">
                  <div
                    class="text-h6 text-bold text-black no-wrap overflow-hidden"
                    style="width: calc(100% - 4rem); height: 2rem"
                  >
                    {{ mapPose.id.substring(0, 10) + "..." }}
                  </div>
                </q-card-section>
                <q-separator />
                <q-list>
                  <q-item
                    dense
                    v-for="item in items"
                    v-bind:key="item.key"
                    clickable
                    v-ripple
                  >
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{
                      mapPose[item.key]
                    }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { onMounted, ref, watch } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api/index.js";

const items = [
  { title: "货架层数", key: "level" },
  { title: "地图名称", key: "mapName" },
  { title: "导航点名称", key: "mapPoseName" },
];

export default {
  name: "ShelfSelector",
  props: {
    modelValue: String,
  },
  setup(props, context) {
    const visible = ref(false);

    const shelf = ref({});
    const shelfType = ref();
    const shelfTypes = ref([]);

    const shelfList = ref([]);
    const orderUrl = useAPIStore().orderUrl;
    function getShelf() {
      if (props.modelValue !== "") {
        api.get(orderUrl + "shelf/id/" + props.modelValue).then((rs) => {
          shelf.value = rs.data;
          api
            .get(orderUrl + "shelfType/id/" + shelf.value.shelfType)
            .then((rs) => {
              shelfType.value = rs.data;
            });
        });
      }
    }
    watch(shelfType, (value) => {
      api.get(orderUrl + "shelf/type/" + value.id).then((rs) => {
        shelfList.value = rs.data;
      });
    });
    function getMaps() {
      api.get(orderUrl + "shelfType/all").then((rs) => {
        shelfTypes.value = rs.data;
      });
    }
    onMounted(() => {
      getShelf();
      getMaps();
    });

    return {
      shelfType,
      shelfTypes,
      shelfList,
      items,
      shelf,
      visible,
      show() {
        getShelf();
        visible.value = true;
      },
      select(data) {
        shelf.value = data;
        context.emit("update:modelValue", shelf.value.id);
        visible.value = false;
      },
    };
  },
};
</script>
